<template>
  <div class="blacklist">
    <!-- 搜索表单 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.email" placeholder="请输入email" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.tel" placeholder="请输入手机" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i> 搜索
          </el-button>
          <el-button @click="resetSearch">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 用户表格 -->
    <el-card class="table-card">
      <div class="operation-bar">
        <el-button type="primary" @click="handleBatchRestore" :disabled="!selectedUsers.length">
          <i class="el-icon-refresh"></i> 批量恢复
        </el-button>
      </div>

      <el-table
        :data="paginatedData"
        border
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column prop="email" label="Email" width="180"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80"></el-table-column>
        <el-table-column prop="tel" label="手机" width="120"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="{ row }">
            <el-button
              type="success"
              size="mini"
              @click="handleRestore(row)"
            >
              恢复
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'BlackList',
  data() {
    return {
      // 搜索表单
      searchForm: {
        username: '',
        email: '',
        tel: ''
      },
      // 表格数据
      tableData: [],
      loading: false,
      selectedUsers: [],
      
      // 分页
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  
  created() {
    this.fetchData()
  },
  
  computed: {
    // 计算分页后的数据
    paginatedData() {
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize;
      const end = start + this.pagination.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  
  methods: {
    // 获取黑名单数据
    async fetchData() {
      this.loading = true
      try {
        const params = {
          username: this.searchForm.username || '',
          email: this.searchForm.email || '',
          tel: this.searchForm.tel || ''
        }
        
        const res = await request.get('/BlackListServlet', { params })
        
        if (res.code === 0) {
          const data = res.data
          this.tableData = data.records
          this.pagination.total = data.total
        } else {
          this.$message.error(res.msg || '获取黑名单失败')
        }
      } catch (error) {
        console.error('获取黑名单失败:', error)
        this.$message.error('获取黑名单失败')
      }
      this.loading = false
    },

    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.fetchData()
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        username: '',
        email: '',
        tel: ''
      }
      this.handleSearch()
    },

    // 表格选择
    handleSelectionChange(selection) {
      this.selectedUsers = selection
    },

    // 恢复单个用户
    async handleRestore(row) {
      try {
        await request.get('/ChangeStatusServlet', {
          params: {
            email: row.email,
            status: 1
          }
        })
        this.$message.success('恢复成功')
        this.fetchData()
      } catch (error) {
        this.$message.error('恢复失败')
      }
    },

    // 批量恢复
    async handleBatchRestore() {
      if (!this.selectedUsers.length) return
      
      try {
        // 确认提示
        await this.$confirm('确认要恢复选中的用户吗？', '提示', {
          type: 'warning'
        });

        const emails = this.selectedUsers.map(user => user.email).join(',')
        // 修改为正确的接口
        const res = await request.get('/SelectBlackServlet', {
          params: { emails }
        })

        if (res.code === 0) {
          this.$message.success('批量恢复成功')
          this.fetchData()
        } else {
          this.$message.error(res.msg || '批量恢复失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量恢复失败:', error)
          this.$message.error('批量恢复失败')
        }
      }
    },

    // 处理每页显示数量变化
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    
    // 处理页码变化
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style lang="less" scoped>
.blacklist {
  .search-card {
    margin-bottom: 20px;
  }

  .operation-bar {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style> 